<template>
  <div class="search-list-box">
    <p class="tab">
      <span v-for="(item, index) in tabArr" :key="index" :class="{active: tabActive===index}" @click="handleChangeTab(item)">{{item.name}}</span>
    </p>
    <ul class="search-list clearfix">
      <li v-for="(item, index) in companyList" :key="index">
        <i>
          <img v-if="item.logo&&item.logo !== 'none'" :src="item.logo">
          <img v-if="item.logo&&item.logo === 'none'" src="../../../../assets/img/default.png">
        </i>
        <div class="">
          <h3 >{{item._source.name}}</h3>
          <div class="layout">
            <div class="flex flex1">
              <p>法定代表人：{{item._source.oper_name}}</p>
              <p>经营状态：{{item._source.status}}</p>
              <p>统一社会信用代码：{{item._source.credit_no}}</p>
            </div>
            <div class="flex flex1">
              <p>注册资金：{{item._source.regist_capi}}</p>
              <p>成立时间：{{item._source.start_date}}</p>
              <p>公司类型：{{item._source.econ_kind}}</p>
            </div>
            <div class="flex flex2">
              <p v-if="item._source.scope" :title="item._source.scope">经营范围：{{item._source.scope.length>100?item._source.scope.substr(0,100)+'...':item._source.scope}}</p>
            </div>
            <div class="flex flex-collect">
              <i class="collect" :class="{'not-collect': !item.isKeep}"></i>
            </div>
          </div>
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
// import {companyArr1} from './company.js'
import {companyArr1, companyArr2} from './companyData.js'
export default {
  data() {
    return {
      tabActive: -1,
      tabArr: [
        {index: 0, name: '锂离子'}
      ],
      companyList: []
    }
  },
  methods: {
    init() {
      this.getCompanyList(companyArr1)
    },
    getCompanyList(arr) {
      let ths = this
      this.companyList = arr.data ? arr.data.result : [];
      this.companyList.forEach((v, index) => {
        if (v._id === '') {
          if (index == 0) {
            // this.$set(this.companyList[index], 'logo', require('@/assets/img/subscribe/'))
          }
        } else {
          ths.getLogo(v._id, index)
        }
      })
      this.total = arr.data ? arr.data.page.totalRow : 0
    },
    // 获取公司logo
    getLogo(eid, index) {
      this.$get(this.$Url.search.companyLogo, {
        eid: eid,
      }).then(res => {
        let data = res.data || 'none'
        this.$set(this.companyList[index], 'logo', data)
      }).catch(err => {})
    },
    // 获取公司详细信息
    getCompanyDetails(index, name) {
      let that = this
      this.$post(this.$Url.search.companyName, {
        url: '/enterprise/getDetailAndContactByName',
        keyword: name
      }).then(res => {
        let data = res.data
        that.$set(that.companyList[index], 'telephone', data.contact.telephone)
        that.$set(that.companyList[index], 'email', data.contact.email)
        that.$set(that.companyList[index], 'address', data.contact.address)
        that.$set(that.companyList[index], 'regist_capi', data.regist_capi)
        that.$set(that.companyList[index], 'scope', data.scope ? data.scope : '暂无')
      }).catch(e=>{
        console.log(e);
      })
    },
    handleChangeTab(item) {
      if (this.tabActive === item.index) {
        this.tabActive = -1
      } else {
        this.tabActive = item.index
      }
    }
  },
  watch: {
    tabActive() {
      if (this.tabActive === 0) {
        this.getCompanyList(companyArr2)
      } else {
        this.getCompanyList(companyArr1)
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.tab {
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  text-align: left;
  span {
    display: inline-block;
    line-height: 30px;
    padding: 0 10px;
    border: 1px solid #7578ee;
    border-radius: 2px;
    margin-right: 14px;
    text-align: center;
    font-size: 14px;
    color: #7775da;
    cursor: pointer;
    &:hover, &.active {
      color: #fff;
      background-color: #7775da;
    }
  }
}
.search-list {
  position: relative;
  padding-left: 0;
  margin: 10px 20px;
  text-align: left;
  li {
    position: relative;
    float: left;
    display: block;
    width: 100%;
    margin: 10px 0;
    > i {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 150px;
      img {
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
      }
    }
    > div {
      padding-left: 170px;
      margin-top: 20px;
      h3 {
        margin-left: 10px;
        margin-bottom: 8px;
        font-weight: 600;
        font-size: 16px;
        color: #7674a3;
        cursor: pointer;
        &:hover {
          color: $mainColor;
        }
      }
      .layout {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        .flex {
          flex: 1;
          &.flex2 {
            flex: 1.4;
          }
          &.flex-collect {
            flex: none;
            width: 70px;
          }
          p {
            padding: 3px 10px;
            margin-bottom: 0;
            font-size: 14px;
            word-wrap: break-word;
            word-break: break-all;
            color: #7674a3;
          }
        }
      }
      
    }
  }
}
.tips-list {
  position: relative;
  width: 100%;
  padding-left: 0;
  margin: 10px 0;
  list-style: none;
  li {
    float: left;
    display: block;
    padding: 8px 30px;
    margin-right: 14px;
    margin-bottom: 14px;
    border-radius: 30px;
    font-size: 14px;
    color: #8a88df;
    background-color: #e7e7fc;
  }
}
.collect {
  /*position: absolute;
  bottom: 0;
  right: 0;*/
  display:block;
  width: 30px;
  height: 30px;
  background: url(../../../../assets/img/collect.png) no-repeat center center;
  background-size: 100% auto;
  cursor: pointer;
}
.not-collect {
  background-image: url(../../../../assets/img/not-collect.png) !important;
}
.pagination {
  margin-top: 30px;
  text-align: center;
}
.el-pagination {
  padding-right: 0;
}
.gray {
  color: #7674a3 !important
}
</style>